<template>
	<!-- 海报详情页 -->
	<view class="main">
		<view id="poster" class="haibao">
			<img class="dl" src="../../images/year/dl.png" />
			<img class="year" src="../../images/year/year.png" />
			<img class="hua1" src="../../images/year/hua1.png" />
			<img class="hua2" src="../../images/year/hua2.png" />
			<img class="yun1" src="../../images/year/yun1.png" />
			<img class="yun2" src="../../images/year/yun2.png" />
			<img class="redbg" src="../../images/year/redbg.png" />
			<img class="ewm" src="../../images/circle/cs_ewm.png"/>
			<img class="people" :src="haibaoData.fileUrl"/>
			<view class="gs" style="writing-mode : tb-rl ;">{{ haibaoData.orgName + haibaoData.linkPost }}</view>
			<view class="name" style="writing-mode : tb-rl ;">{{ haibaoData.linkName }}</view>
			<view class="text">
				<!-- <text class="t1">{{ haibaoData.orgName + '倡议：'}}</text> -->
				<text class="t2">{{"我们与亲朋好友" + haibaoData.area + "相聚，拥抱新春， 商会暖乡情，携手过大年！"}}</text>
			</view>
			<text class="company">{{ haibaoData.orgName }}</text>
			<text class="yqlw">一起来往数字商协会平台</text>
		</view>
	</view>
	</view>
</template>

<script>
import request from "../../utils/request.js";
let jweixin = require("jweixin-module"); //引入配置
export default {
  data() {
    return {
      id: "6695d45065ce11eb8b4500163e05ff66",
      haibaoData: {},
    };
  },
  onLoad(options) {
    this.id = options.id;
    let token = uni.getStorageSync("token");
    if (token) {
      this.huoDetail();
    } else {
      this.configWeiXin();
    }
  },
  methods: {
    huoDetail() {
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        this.configWeiXin();
      } else {
        request({
          url: "h5/specialevents/info?id=" + this.id,
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {},
        }).then((res) => {
          if (res.data.code == 200) {
            this.haibaoData = res.data.data;
            this.handleShare();
          } else if (res.data.code == 403) {
            this.configWeiXin();
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleShare() {
      //分享功能
      let that = this;
      request({
        url: "h5/login/jsapiSignature",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7, //post一定要带这个header，被这里坑了半天
        },
        data: {
          url: window.location.href.split("#")[0],
        },
      }).then((res) => {
        if (res.statusCode == 200) {
          jweixin.config({
            debug: false,
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
          });

          jweixin.ready(function () {
            let imgT = "https://img.yiqilaiwang.com/yqlwlogo.png";
            let linkT =
              that.globalData.domain +
              "/pages/yearPage/detail?id=" +
              that.haibaoData.id;
            jweixin.updateTimelineShareData({
              title: "商会倡议“就地过年”专属海报自助制作模板来了", //分享标题
              desc:
                "商会暖乡情，携手过大年。一起来往·数字商协会平台专门为各商协会和企业提供了“就地过年“倡议海报自助制作模版，欢迎大家上传照片和信息生成海报", // 分享描述
              link: linkT, //分享链接
              imgUrl: imgT, //分享图标
            });
            jweixin.updateAppMessageShareData({
              title: "商会倡议“就地过年”专属海报自助制作模板来了", //分享标题
              desc:
                "商会暖乡情，携手过大年。一起来往·数字商协会平台专门为各商协会和企业提供了“就地过年“倡议海报自助制作模版，欢迎大家上传照片和信息生成海报", // 分享描述
              link: linkT, //分享链接
              imgUrl: imgT, //分享图标
            });
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    configWeiXin() {
      let _this = this;
      //获取公众号配置
      request({
        //获取appid
        url: "h5/login/jsapiSignature",
        method: "POST",
        data: {
          url: window.location.href.split("#")[0], //后台通过域名进行授权
        },
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
        },
      }).then((res) => {
        var jsApiList = [
          "onMenuShareAppMessage",
          "onMenuShareTimeline",
          "updateAppMessageShareData",
          "updateTimelineShareData",
          "hideOptionMenu",
          "showOptionMenu",
        ];
        if (res.statusCode == 200) {
          //获取成功
          jweixin.config({
            debug: false, // 开启调试模式，发布的时候改为false
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: jsApiList, // 必填，需要使用的JS接口列表
          });

          jweixin.ready(function () {
            //配置成功
            _this.wxJsdkAuthorize(res.data.appId); //调用公众号-授权
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    //公众号授权
    wxJsdkAuthorize(_appid) {
      let _this = this;
      let link = window.location.href;
      //授权时会跳到微信的页面，然后会自动调回来带着一个code
      let _code = "";
      if (link.includes("code=")) {
        _code = link.split("code=")[1].split("&")[0];
      }
      // 如果拿到_code，传到后台
      if (_code) {
        console.log(_code, "打印code");
        request({
          url: "h5/login/getOpenIdV2", //拿oponid
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
          },
          data: {
            code: _code,
          },
        }).then((res) => {
          // console.log(res, '获取oponId')
          if (res.data.code == 200) {
            if (res.data.data.isLogin) {
              uni.setStorageSync("token", res.data.data.token); //缓存token
              uni.setStorageSync("personal", res.data.data);
              _this.huoDetail();
            }
          } else {
            // uni.showToast({
            // 	title: "微信授权失效，请关闭重试",
            // 	duration: 2000,
            // 	icon: "none"
            // });
          }
        });
      } else {
        let appid = _appid;
        let uri = encodeURIComponent(link);
        let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
        window.location.href = authURL;
      }
    },
  },
};
</script>



<style lang="less" scoped>
.haibao {
  width: 100vw;
  height: 100vh;
  background-color: #dae1ed;
  opacity: 1;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;

  .dl {
    width: 253rpx;
    height: 217rpx;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
  }

  .year {
    width: 433rpx;
    height: 157rpx;
    position: absolute;
    top: 62rpx;
    left: 60rpx;
    z-index: 3;
  }

  .gs {
    position: absolute;
    top: 318rpx;
    left: 113rpx;
    opacity: 1;
    font-size: 28rpx;
    font-family: SourceHanSerifSC, SourceHanSerifSC-Bold;
    color: #000000;
    z-index: 3;
  }

  .name {
    position: absolute;
    top: 318rpx;
    left: 154rpx;
    opacity: 1;
    font-size: 36rpx;
    font-family: SourceHanSerifSC, SourceHanSerifSC-Bold;
    font-weight: 700;
    color: #000000;
    z-index: 3;
  }

  .hua1 {
    width: 42rpx;
    height: 125rpx;
    position: absolute;
    top: 378rpx;
    right: 142rpx;
    z-index: 3;
  }

  .hua2 {
    width: 42rpx;
    height: 94rpx;
    position: absolute;
    top: 743rpx;
    left: 69rpx;
    z-index: 3;
  }

  .yun1 {
    width: 126rpx;
    height: 87rpx;
    position: absolute;
    top: 649rpx;
    left: 0;
    z-index: 3;
  }

  .yun2 {
    width: 161rpx;
    height: 87rpx;
    position: absolute;
    top: 495rpx;
    right: 0;
    z-index: 3;
  }

  .redbg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
  }

  .text {
    width: 640rpx;
    height: 178rpx;
    position: absolute;
    bottom: 207rpx;
    right: 55rpx;
    z-index: 3;
    background-image: url(../../images/year/textbg.png);
    background-size: 100% 100%;
    padding: 28rpx 32rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;

    // .t1 {
    // 	font-size: 44rpx;
    // 	font-family: SourceHanSerifSC, SourceHanSerifSC-Bold;
    // 	font-weight: 700;
    // 	text-align: center;
    // 	color: #ac1621;
    // }

    .t2 {
      opacity: 1;
      font-size: 35rpx;
      font-family: SourceHanSerifSC, SourceHanSerifSC-SemiBold;
      font-weight: SemiBold;
      text-align: center;
      color: #ac1621;
      line-height: 56rpx;
    }
  }

  .ewm {
    width: 76rpx;
    height: 76rpx;
    position: absolute;
    bottom: 71rpx;
    right: 55rpx;
    z-index: 3;
  }

  .company {
    opacity: 1;
    font-size: 22rpx;
    font-family: SourceHanSerifSC, SourceHanSerifSC-Regular;
    font-weight: 400;
    color: #d8e1ee;
    position: absolute;
    bottom: 118rpx;
    left: 55rpx;
    z-index: 3;
  }
  .people {
    width: 100%;
  }
  .yqlw {
    opacity: 1;
    font-size: 22rpx;
    font-family: SourceHanSerifSC, SourceHanSerifSC-Regular;
    font-weight: 400;
    color: #d8e1ee;
    position: absolute;
    bottom: 77rpx;
    left: 55rpx;
    z-index: 3;
  }
}
</style>
